<!--
 - Author : 003.
 - Date   : 2018/9/25.
 - File   : 优惠券
 -->

<template>
<div class="wrapper">
  <b-header></b-header>
  <div class="main-wrapper isno-left-bar">
    <div class="main-content">
      <div class="page">
        <div style="margin-bottom:10px;text-align:right;">
          <el-button type="primary" @click="addList">添加</el-button>
          <el-button type="primary" @click="addPL">批量添加</el-button>
        </div>
        <table class="table table-order table-order-hover">
          <thead>
            <tr>
              <th>序号</th>
              <th>商品标题</th>
              <th>订单状态</th>
              <th>付款金额</th>
              <th>返佣</th>
              <th>是否结清</th>
              <th>淘宝订单编号</th>
              <th>付款时间</th>
              <th>定金</th>
              <th>付款预估收入</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in memberList" :key="index">
              <td style="width:60px">
                <div class="ct" style="width:50px">{{index+1}}</div>
              </td>
              <td>
                <div class="ct">{{item.title}}</div>
              </td>
              <td>
                <div class="ct">{{item.status}}</div>
              </td>
              <td>
                <div class="ct">{{item.pay}}</div>
              </td>
              <td>
                <div class="ct">{{item.fanyong}}</div>
              </td>
              <td>
                <div class="ct">{{item.is_jiesuan}}</div>
              </td>
              <td>
                <div class="ct">{{item.no}}</div>
              </td>
              <td>
                <div class="ct">{{item.fukuan_time}}</div>
              </td>
              <td>
                <div class="ct">{{item.dingjing}}</div>
              </td>
              <td>
                <div class="ct">{{item.yg_souru}}</div>
              </td>
              <td width="190">
                <el-button @click="editList(item)">编辑</el-button>
                <el-button type="danger" @click="deleteList(item)">删除</el-button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <v-modal :showTag="addListTag" @onCancel="addListTag=false" @onOk="addListReq">
    <el-form :inline="true" :model="form" label-width="100px">
      <el-form-item label="商品标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-input v-model="form.status"></el-input>
      </el-form-item>
      <el-form-item label="付款金额">
        <el-input v-model="form.pay"></el-input>
      </el-form-item>
      <!-- <el-form-item label="返佣">
        <el-input v-model="form.fanyong"></el-input>
      </el-form-item> -->
      <el-form-item label="是否结清">
        <el-select v-model="form.is_jiesuan" placeholder="请选择">
          <el-option label="是" value="是"></el-option>
          <el-option label="否" value="否"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="淘宝订单编号">
        <el-input v-model="form.no"></el-input>
      </el-form-item>
      <el-form-item label="付款时间">
        <el-input v-model="form.fukuan_time"></el-input>
      </el-form-item>
      <el-form-item label="定金">
        <el-input v-model="form.dingjing"></el-input>
      </el-form-item>
      <el-form-item label="付款预估收入">
        <el-input v-model="form.yg_souru"></el-input>
      </el-form-item>
    </el-form>
  </v-modal>
</div>
</template>

<script>
  import {apiSource} from '../../travel-api'
  import config from '../../config';
  import * as axios from 'axios'

  export default {
    data() {
      return {
        form: {},
        addListTag: false,
        memberList: [],
        jiaotongList:[
          {
          "returnCode": "000000", 
          "returnMsg": "成功", 
          "data": {
              "tagList": null, 
              "total": 10, 
              "productList": [
                  {
                      "productId": "10007483", 
                      "productName": "【最红】肯德基10元购20元券", 
                      "productType": "03", 
                      "productKind": "01", 
                      "imagePath": "https://creditcard.bankcomm.com/tfimg/pms01/M00/46/BD/trSecl0o2r-ABgSkAABz-jTrRZg076.jpg", 
                      "cuisineId": "ZDCYCXxiao", 
                      "cuisineName": "快餐/简餐", 
                      "actLabelList": [
                          {
                              "actLabel": "最红星期五", 
                              "show": true, 
                              "actType": "98"
                          }
                      ], 
                      "productActStatus": "8", 
                      "priceType": "2", 
                      "productPrice": 10, 
                      "productFaceValue": 20, 
                      "salesVolume": 68610, 
                      "distance": 0, 
                      "startTime": ""
                  }, 
                  {
                      "productId": "10027049", 
                      "productName": "【最红】周黑鸭35元购70元券", 
                      "productType": "00", 
                      "productKind": "01", 
                      "imagePath": "https://creditcard.bankcomm.com/tfimg/pms01/M00/47/06/trSecl0o2vuALTEkAABR4hnJK74947.jpg", 
                      "cuisineId": "ZDCYCXxiuxian", 
                      "cuisineName": "休闲小吃", 
                      "actLabelList": [
                          {
                              "actLabel": "最红星期五", 
                              "show": true, 
                              "actType": "98"
                          }
                      ], 
                      "productActStatus": "8", 
                      "priceType": "2", 
                      "productPrice": 35, 
                      "productFaceValue": 70, 
                      "salesVolume": 14113, 
                      "distance": 0, 
                      "startTime": ""
                  }, 
                  {
                      "productId": "10038956", 
                      "productName": "【最红】汉堡王25元购50元券", 
                      "productType": "07", 
                      "productKind": "01", 
                      "imagePath": "https://creditcard.bankcomm.com/tfimg/pms01/M00/46/E2/trSec10o2tuASXDDAAA-t7pIpvM724.jpg", 
                      "cuisineId": "ZDCYCXxiao", 
                      "cuisineName": "快餐/简餐", 
                      "actLabelList": [
                          {
                              "actLabel": "最红星期五", 
                              "show": true, 
                              "actType": "98"
                          }
                      ], 
                      "productActStatus": "8", 
                      "priceType": "2", 
                      "productPrice": 25, 
                      "productFaceValue": 50, 
                      "salesVolume": 11139, 
                      "distance": 0, 
                      "startTime": ""
                  }, 
                  {
                      "productId": "10027370", 
                      "productName": "【最红】歌帝梵50元优惠券", 
                      "productType": "00", 
                      "productKind": "01", 
                      "imagePath": "https://creditcard.bankcomm.com/tfimg/pms01/M00/46/ED/trSec10o2uOAIEGHAABkYDwOPLI908.jpg", 
                      "cuisineId": "ZDCYCXmian", 
                      "cuisineName": "面包甜点", 
                      "actLabelList": [
                          {
                              "actLabel": "最红星期五", 
                              "show": true, 
                              "actType": "98"
                          }
                      ], 
                      "productActStatus": "", 
                      "priceType": "2", 
                      "productPrice": 25, 
                      "productFaceValue": 50, 
                      "salesVolume": 7944, 
                      "distance": 0, 
                      "startTime": ""
                  }, 
                  {
                      "productId": "10027845", 
                      "productName": "【最红】DQ20元券", 
                      "productType": "00", 
                      "productKind": "01", 
                      "imagePath": "https://creditcard.bankcomm.com/tfimg/pms01/M00/47/18/trSec10o2xaANeDOAABVvS8qX8Q219.jpg", 
                      "cuisineId": "ZDCYCXmian", 
                      "cuisineName": "面包甜点", 
                      "actLabelList": [
                          {
                              "actLabel": "最红星期五", 
                              "show": true, 
                              "actType": "98"
                          }
                      ], 
                      "productActStatus": "8", 
                      "priceType": "2", 
                      "productPrice": 10, 
                      "productFaceValue": 20, 
                      "salesVolume": 7441, 
                      "distance": 0, 
                      "startTime": ""
                  }, 
                  {
                      "productId": "10027452", 
                      "productName": "【最红】真功夫30元代金券", 
                      "productType": "00", 
                      "productKind": "01", 
                      "imagePath": "https://creditcard.bankcomm.com/tfimg/pms01/M00/51/83/trSec11RHkWAOLFzAACpkDwhR7I342.jpg", 
                      "cuisineId": "ZDCYCXxiao", 
                      "cuisineName": "快餐/简餐", 
                      "actLabelList": [
                          {
                              "actLabel": "最红星期五", 
                              "show": true, 
                              "actType": "98"
                          }
                      ], 
                      "productActStatus": "", 
                      "priceType": "2", 
                      "productPrice": 15, 
                      "productFaceValue": 30, 
                      "salesVolume": 5221, 
                      "distance": 0, 
                      "startTime": ""
                  }, 
                  {
                      "productId": "10027399", 
                      "productName": "【最红】17元购34元太平洋咖啡大杯饮品券", 
                      "productType": "00", 
                      "productKind": "01", 
                      "imagePath": "https://creditcard.bankcomm.com/tfimg/pms01/M00/46/E7/trSec10o2t6AAyf3AACa7EaRQg0301.jpg", 
                      "cuisineId": "ZDCYCXkfyl", 
                      "cuisineName": "咖啡饮料", 
                      "actLabelList": [
                          {
                              "actLabel": "最红星期五", 
                              "show": true, 
                              "actType": "98"
                          }
                      ], 
                      "productActStatus": "", 
                      "priceType": "2", 
                      "productPrice": 17, 
                      "productFaceValue": 34, 
                      "salesVolume": 3596, 
                      "distance": 0, 
                      "startTime": ""
                  }, 
                  {
                      "productId": "10027462", 
                      "productName": "【最红】蒙自源50元优惠券", 
                      "productType": "00", 
                      "productKind": "01", 
                      "imagePath": "https://creditcard.bankcomm.com/tfimg/pms01/M00/46/ED/trSec10o2uOAXFumAAC03V2YNK4045.jpg", 
                      "cuisineId": "ZDCYCXxiao", 
                      "cuisineName": "快餐/简餐", 
                      "actLabelList": [
                          {
                              "actLabel": "最红星期五", 
                              "show": true, 
                              "actType": "98"
                          }
                      ], 
                      "productActStatus": "", 
                      "priceType": "2", 
                      "productPrice": 25, 
                      "productFaceValue": 50, 
                      "salesVolume": 2305, 
                      "distance": 0, 
                      "startTime": ""
                  }, 
                  {
                      "productId": "10029573", 
                      "productName": "【最红】永和大王15元购30元券", 
                      "productType": "00", 
                      "productKind": "01", 
                      "imagePath": "https://creditcard.bankcomm.com/tfimg/pms01/M00/47/11/trSec10o2w2AbFUjAACAlgRApIA793.JPG", 
                      "cuisineId": "ZDCYCXxiao", 
                      "cuisineName": "快餐/简餐", 
                      "actLabelList": [
                          {
                              "actLabel": "最红星期五", 
                              "show": true, 
                              "actType": "98"
                          }
                      ], 
                      "productActStatus": "8", 
                      "priceType": "2", 
                      "productPrice": 15, 
                      "productFaceValue": 30, 
                      "salesVolume": 2181, 
                      "distance": 0, 
                      "startTime": ""
                  }, 
                  {
                      "productId": "10048099", 
                      "productName": "【最红】元祖50元购100元券", 
                      "productType": "01", 
                      "productKind": "01", 
                      "imagePath": "https://creditcard.bankcomm.com/tfimg/pms01/M00/47/08/trSec10o2v6AchSQAABWEU19qI4413.jpg", 
                      "cuisineId": "ZDCYCXmian", 
                      "cuisineName": "面包甜点", 
                      "actLabelList": [
                          {
                              "actLabel": "最红星期五", 
                              "show": true, 
                              "actType": "98"
                          }
                      ], 
                      "productActStatus": "8", 
                      "priceType": "2", 
                      "productPrice": 50, 
                      "productFaceValue": 100, 
                      "salesVolume": 600, 
                      "distance": 0, 
                      "startTime": ""
                  }
              ], 
              "serverDateTime": 1571983540718
            }
          }
        ],
        zhaoshangList: [
          {
            "syshead": {
                "trans_code": "SI_PRD0017", 
                "chnl_id": "01", 
                "rsp_code": "0000000000", 
                "session_id": "", 
                "rsp_msg": "sucess"
            }, 
            "body": {
              "onegoPayDiscountList": [ ], 
              "rushBeginTime": "10:00", 
              "productListPicUrl": "", 
              "salesPrice": "50", 
              "showWeekDay": "0001000", 
              "isCanRush": "0", 
              "productName": "(周三5折)韩悦仓山万达店100元代金券", 
              "showPicUrl": "https://piao-cdn.o2o.cmbchina.com/images/325905f9655345569d84fd956bb5decf.jpg", 
              "merNo": "059100581", 
              "corner": "1", 
              "strName": "韩悦烤肉(仓山万达店)", 
              "quantitySold": "340", 
              "stock": "", 
              "longitude": "119.273810", 
              "merOnegoType": "", 
              "salesBeginDate": "2019-09-28", 
              "servicePhone": "0591-86392702", 
              "ticketPrice": "100", 
              "payDetailInfo": "仅支持绑定的招行信用卡支付", 
              "signOfPriceType": "1000", 
              "detailInfo": "【商品详情】50元购买韩悦仓山万达店100元代金券1张，本券支持“一招过”便捷支付；\n【购买须知】本券每周三上午10点开抢，本券有效期内每位客户最多购买16张（参照券面有效期），数量有限，购完即止；特殊及法定节假日使用情况以详询门店；\n【使用规则】本券仅限周三使用，每桌限用2张，本券限堂食，不提供外送服务，不可同时享受商家其他优惠，不与招行其他代金券同享；本券支持一招过买单（含用券后剩余需支付的金额），且须券面总金额不高于消费总金额；\n【门店地址电话】可在“适用门店”中查看，无需预约，营业时间以门店运营情况为准；\n【咨询热线】招商银行咨询电话：0591-83347528；\n【使用方式】打开已购买的代金券（路径：我的-订单-票券-饭票），点击“一招过买单”，选择当前消费的门店，输入买单金额，确认代金券使用数量及剩余实际需付金额后点击“确认支付”，完成支付操作后出现“支付成功”页面即表示成功完成一招过买单；", 
              "isCanReturn": "0", 
              "maxOfUser": "16", 
              "btnStatus": "1", 
              "creditCardOfCmbPri": "", 
              "productPicUrl": "https://piao-cdn.o2o.cmbchina.com/images/", 
              "distance": "3", 
              "recommend": "", 
              "signOfRushToday": "", 
              "validityPerBegin": "2019-09-28", 
              "validityPerEnd": "2019-11-27", 
              "isCmbCreditOnly": "1", 
              "strNo": "0591005810001", 
              "maxOfOrder": "2", 
              "rushEndTime": "23:55", 
              "isOneGo": "0", 
              "dimension": "26.035750", 
              "productNo": "9919092801133", 
              "isCanAutoReturn": "0", 
              "prdStock": "", 
              "address": "仓山区浦上大道276号仓山万达广场3楼", 
              "btnText": "即将开始", 
              "isWechatPay": "0", 
              "mainCountDown": "14:10:32", 
              "rows": [
                  {
                      "signOfPriceType": "1000", 
                      "salesPrice": "50", 
                      "salesPricePoint": ""
                  }
              ], 
              "merLogo": "https://piao-cdn.o2o.cmbchina.com/images/325905f9655345569d84fd956bb5decf.jpg", 
              "totalRec": "1", 
              "salesPoint": "", 
              "bakNo": "991909280113300001"
            }
          }
        ],
        addMemberTag:false
      }
    },
    watch: {
    },
    mounted() {
      this.init()
    },
    methods: {
      init () {
        this.getList()
      },
      filterReapt (list) {
        let a = new Set(list)
        let b = new Set(this.memberList.map(e =>{
          return e.no
        }))
        let difference = new Set([...a].filter(x => !b.has(x.no)))
        let diffList = Array.from(difference)
        console.log(diffList, 'diffList')
        return diffList
      },
      getList () {
        axios({
          method: 'post',
          url: 'http://www.ilove03.com/api/getOrderList',
          responseType: 'json',
          data: {}
        }).then(response => {
          // console.log(response, 'success')
          this.memberList = response.data.result
        }).catch(e => {
        })
      },
      addList () {
        this.addListTag = true
        let param = {
            title: "苔知趣海苔夹心脆儿童即食芝麻夹心海苔罐装紫菜宝宝营养网红零食", 
            price: "14.80", 
            no: "682276931934830080", // 682276931934994349
            status: "已付款", 
            pay: "4.96", 
            fanyong: "0.67", 
            percent: "30.00%", 
            fukuan_time: "2019-10-26 21:21:49", 
            yg_souru: "1.49", 
            is_jiesuan: "否", 
            dingjing: "0.00"
        }
        this.form = param
        this.id = ''
      },
      addPL () {
        let list = [ { "title": "淋浴花洒喷头增压家用花酒淋雨喷头手持单头莲蓬头淋浴头套装通用", "price": "28.90", "no": "685510113877054253", "status": "已付款", "pay": "25.80", "fanyong": "2.58", "percent": "20.00%", "fukuan_time": "2019-10-29 01:19:30", "yg_souru": "5.16", "is_jiesuan": "否", "dingjing": "0.00" }, { "title": "心相印抽纸 婴儿专用卫生抽纸巾三层面巾纸2箱心心相印纸抽36包", "price": "139.90", "no": "564673925383963599", "status": "已付款", "pay": "20.00", "fanyong": "0.20", "percent": "2.00%", "fukuan_time": "2019-10-28 20:55:18", "yg_souru": "0.40", "is_jiesuan": "否", "dingjing": "20.00" }, { "title": "心相印卷纸茶语经典卷筒纸四层200g清洁家用卫生纸巾27卷", "price": "74.90", "no": "564583876278963599", "status": "已付款", "pay": "20.00", "fanyong": "0.20", "percent": "2.00%", "fukuan_time": "2019-10-28 20:49:21", "yg_souru": "0.40", "is_jiesuan": "否", "dingjing": "20.00" }, { "title": "【官方正品】韩国进口保宁宝宝柔顺剂婴儿专用新生儿衣服护理5.2L", "price": "172.00", "no": "564681606593963599", "status": "已付款", "pay": "20.00", "fanyong": "0.20", "percent": "2.00%", "fukuan_time": "2019-10-28 20:44:02", "yg_souru": "0.40", "is_jiesuan": "否", "dingjing": "20.00" }, { "title": "【官方正品】韩国进口保宁BB婴幼儿新生儿用洋槐洗衣皂BB皂10块", "price": "110.00", "no": "564579140626963599", "status": "已付款", "pay": "20.00", "fanyong": "0.20", "percent": "2.00%", "fukuan_time": "2019-10-28 20:41:15", "yg_souru": "0.40", "is_jiesuan": "否", "dingjing": "20.00" }, { "title": "健美创研洗脸巾女纯棉一次性洗面擦脸洁面巾美容专用卸妆棉化妆棉", "price": "38.00", "no": "684982722419984319", "status": "已付款", "pay": "5.10", "fanyong": "1.02", "percent": "40.00%", "fukuan_time": "2019-10-28 18:34:24", "yg_souru": "2.04", "is_jiesuan": "否", "dingjing": "0.00" }, { "title": "好吉利42卷纸巾本色卫生纸整箱批发实惠装厕纸家用无芯卷筒纸手纸", "price": "119.90", "no": "684241569309830080", "status": "已付款", "pay": "17.99", "fanyong": "1.80", "percent": "20.00%", "fukuan_time": "2019-10-28 10:06:39", "yg_souru": "3.60", "is_jiesuan": "否", "dingjing": "0.00" }, { "title": "paul&amp;joe高效保湿调色妆前乳补水遮瑕pj搪瓷隔离霜 正品【预售】", "price": "239.00", "no": "564529445864349091", "status": "已付款", "pay": "60.00", "fanyong": "1.20", "percent": "4.00%", "fukuan_time": "2019-10-28 09:56:31", "yg_souru": "2.40", "is_jiesuan": "否", "dingjing": "60.00" }, { "title": "小天鹅全自动家用洗衣机10KG公斤大容量波轮智能操作 TB100V60", "price": "2999.00", "no": "683614754818882760", "status": "已付款", "pay": "1279.00", "fanyong": "12.86", "percent": "2.01%", "fukuan_time": "2019-10-27 20:17:48", "yg_souru": "25.71", "is_jiesuan": "否", "dingjing": "0.00" }, { "title": "甘肃天水花牛苹果水果新鲜当季整箱10斤一箱应季红蛇果粉面丑现季", "price": "129.00", "no": "683269248181378241", "status": "已付款", "pay": "48.60", "fanyong": "4.86", "percent": "20.00%", "fukuan_time": "2019-10-27 18:49:09", "yg_souru": "9.72", "is_jiesuan": "否", "dingjing": "0.00" }, { "title": "亿滋奥利奥威化饼干巧克棒460.8g奶白巧克力网红休闲零食27+9条", "price": "40.00", "no": "683036096832882760", "status": "已结算", "pay": "49.85", "fanyong": "3.74", "percent": "15.00%", "fukuan_time": "2019-10-27 16:26:48", "yg_souru": "7.48", "is_jiesuan": "是", "dingjing": "0.00" }, { "title": "甘肃天水花牛苹果水果新鲜当季整箱10斤一箱应季红蛇果粉面丑现季", "price": "129.00", "no": "683066306116112640", "status": "已付款", "pay": "48.60", "fanyong": "4.86", "percent": "20.00%", "fukuan_time": "2019-10-27 14:22:22", "yg_souru": "9.72", "is_jiesuan": "否", "dingjing": "0.00" }, { "title": "好吉利42卷纸巾本色卫生纸整箱批发实惠装厕纸家用无芯卷筒纸手纸", "price": "119.90", "no": "682850882338830080", "status": "已付款", "pay": "17.99", "fanyong": "1.80", "percent": "20.00%", "fukuan_time": "2019-10-27 12:06:49", "yg_souru": "3.60", "is_jiesuan": "否", "dingjing": "0.00" } ]
        // console.log(this.filterReapt(list))
        this.filterReapt(list).forEach(e =>{
          axios({
            method: 'post',
            url: 'http://www.ilove03.com/api/addOrder',
            responseType: 'json',
            data: e
          }).then(response => {
            console.log(response, '批量添加成功')
            this.getList()
          })
        })
      },
      addListReq () {
        if (this.id) {
          axios({
          method: 'post',
          url: 'http://www.ilove03.com/api/updateOrder',
          responseType: 'json',
          data: this.form
          }).then(response => {
            this.getList()
            this.addListTag = false
          })
        } else {
          if (this.filterReapt([this.form]).length === 0) {
            this.$message({
              type: 'warning',
              message: '此订单已存在'
            })
            return
          }
          console.log(this.filterReapt([this.form]), 'this.form')
          axios({
            method: 'post',
            url: 'http://www.ilove03.com/api/addOrder',
            responseType: 'json',
            data: this.form
          }).then(response => {
            this.getList()
            this.addListTag = false
          })
        }
      },
      editList (item) {
        this.addListTag = true
        this.form = item
        this.id = item.id
        console.log(this.form, 'this.form')
      },
      deleteList (item) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios({
            method: 'post',
            url: 'http://www.ilove03.com/api/deleteOrder',
            responseType: 'json',
            data: {id: item.id}
          }).then(response => {
            this.getList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })         
        })
      }
    }
  }

</script>

<style lang="less" scoped>
 @import "../../assets/less/booking.less";
  .page{
    &-title{
      line-height: 40px;
    }
    &-content{      
      // overflow-x: auto;
      padding-top: 85px;
      padding-bottom: 30px;
    }
    .row_wrap{
      max-height: 180px;
      overflow-y: auto;
    }
    .table_wrap{
      overflow-x: auto;
      margin-bottom: 10px;
    }
    .table-order {
      > thead > tr > th{
        box-sizing: border-box;
      }
      > tbody > tr:nth-of-type(odd) {
        background-color: #fff;
      }
      > tbody > tr:nth-of-type(even) {
        background-color: #eeecec;
      }
      .td_ct{
        // display: inline-block;
        min-width: 80px;
      }
    }
    .table-order-hover {
      > tbody > tr:hover {
        background-color: rgb(241, 241, 241);
      }
    }
    .add-order{
      margin: 1rem auto;
      color: #37B0EB;
      font-size: 25px;
      text-align:center;
      cursor: pointer;
      .el-button--large{
        padding: 12px 60px;
      }
    }
  }
  .ellipsis{
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1;
  }
  .prop-panel .el-form{
    padding-right: 2rem;
  }
  .prop-footer{
    margin-left: -.8rem;
    margin-right: -2.8rem;
    padding: 15px;
    // width: 100%;
    text-align: right;
    box-sizing: border-box;
    border-top:@border;
  }
</style>
